/**
 * 如何使用？
 * 1. 比如我要「获取符号类别列表」，则选中「获取符号类别列表」对应的整段立即执行函数，Ctrl + C
 * 1. 进入爬取站点：http://www.fhcha.com/
 * 2. F12 或 Ctrl + Shift + J 打开控制台
 * 3. Ctrl + V，回车，即可看到爬取的数据
 * 4. 如果想复制下来，对着整块爬取数据右键，点击「Copy object」，此时数据存在了剪切板，新建个文件 Ctrl + V 就可以把数据保存下来
 */

/**
 * 获取符号类别列表
 *
 * @param dom 浏览器元素对象
 * @return categoryList 符号类别列表
 */
;(function (dom) {
  // chrome 浏览器中，$0 表示当前选择的节点
  // 我们这里将它设置为传入的 dom
  window.$0 = dom
  const $0 = window.$0
  const categoryList = []
  if (window.location.href.includes('/emoji.html')) {
  }
  let id = 1
  $0.querySelectorAll('.app-main-area .app-box').forEach((item) => {
    // 类名包含 'document'的 DOM 元素内部没有符号，进行排除
    if (item.classList.contains('document')) return false
    // 中文名
    const categoryNameZh = item.querySelector('.app-title .caption').innerText
    // 英文名，不存在时用使用拼音代替
    const categoryNameEn = item
      .querySelector('.app-title .caption')
      .getAttribute('href')
      .replace(/(\/\/www\.fhcha\.com\/|\.html)/g, '')
    categoryList.push({
      id: id++,
      categoryNameZh,
      categoryNameEn,
    })
  })
  // 在最后添加上 emoji 类别
  categoryList.push({
    id: categoryList.at(-1).id + 1,
    categoryNameZh: 'emoji 表情',
    categoryNameEn: 'emoji',
  })
  return categoryList
})(document.querySelector('body'))

/**
 * 获取符号列表
 *
 * @param dom 浏览器元素对象
 * @return signList 符号列表
 */
;(function (dom) {
  // chrome 浏览器中，$0 表示当前选择的节点
  // 我们这里将它设置为传入的 dom
  window.$0 = dom
  const $0 = window.$0
  const signList = []
  let id = 1
  // emoji 的符号单独放在了一个页面，需要另行处理
  if (window.location.href.includes('/emoji.html')) {
    // 其它符号已经占用了前面 3150 个 id，所以这里要从 3151 开始
    id += 3150
  }
  $0.querySelectorAll('.app-main-area .app-box').forEach((item) => {
    if (item.classList.contains('document')) return false
    const categoryNameZh = item.querySelector('.app-title .caption').innerText
    const categoryNameEn = item
      .querySelector('.app-title .caption')
      .getAttribute('href')
      .replace(/(\/\/www\.fhcha\.com\/|\.html)/g, '')
    item.querySelectorAll('.fuhao li').forEach((item) => {
      const span = item.querySelector('span')
      if (!span) return false
      let title = ''
      if (span.getAttribute('title')) title = span.getAttribute('title')

      let signKeywords = title || ''
      // 符号关键字，暂时用对应类别的中英文替代
      if (window.location.href.includes('/emoji.html')) {
        // emoji 的类别可以获取到中文和英文，所以可以考虑两个都要
        signKeywords += categoryNameEn + ',' + (categoryNameEn === 'emoji-skin-tone' ? '色调' : categoryNameZh)
      } else {
        // 其它符号只有中文和拼音，只要中文就可以了
        signKeywords += categoryNameZh
      }

      signList.push({
        id: id++, // id++ 为后自增，所以会先把赋值，再执行 ++ 操作
        sign: span.innerText, // 符号
        signName: categoryNameEn, // 符号名称，暂时用对应类别的英文替代
        signKeywords, // 字符关键字
      })
    })
  })

  return signList
})(document.querySelector('body'))

/**
 * 获取符号类别与符号的中间关系列表
 *
 * @param dom 浏览器元素对象
 * @return categorySignList 中间关系列表
 */
;(function (dom) {
  // chrome 浏览器中，$0 表示当前选择的节点
  // 我们这里将它设置为传入的 dom
  window.$0 = dom
  const $0 = window.$0
  const categorySignList = []
  let categoryId = 1
  let signId = 1
  if (window.location.href.includes('/emoji.html')) {
    signId += 3150
    $0.querySelectorAll('.app-main-area .app-box .fuhao li').forEach((v, i) => {
      if (!v.querySelector('span')) return false
      categorySignList.push({
        categoryId: 49,
        signId: signId++,
      })
    })
  } else {
    $0.querySelectorAll('.app-main-area .app-box').forEach((item, index) => {
      if (item.classList.contains('document')) return false
      item.querySelectorAll('.fuhao li').forEach((v, i) => {
        if (!v.querySelector('span')) return false
        categorySignList.push({
          categoryId,
          signId: signId++,
        })
      })
      categoryId++
    })
  }
  return categorySignList
})(document.querySelector('body'))
